<template>
  <div class="box">
    <div class="wrapper">
      <div class="nav" @click="back">
        <img :src="$store.state.logoImg" alt="" class="logo"/>
        <div class="title">{{ detail.title }}</div>
      </div>
<!--      <div v-html="detail.content"></div>-->
      <div class="container width_1200">
      <div class="detail_content">
        <div class="detail_content-style">{{detail.content}}
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import {articleDetail} from "@/api/common.js";

const config = require("@/config/index");
export default {
  data() {
    return {
      config,
      detail: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    back() {
      this.$router.push("/");
    },
    // 初始化文章
    init() {
      const id = this.$route.query.id;

      articleDetail(id).then((res) => {
        if (res.success) {
          this.detail = res.result;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail_content{
  position: relative; /* 添加相对定位 */
  max-width: 100%;
  font-size: 14px;
  white-space: pre-wrap; /* 保留空白，允许换行 */
  word-break: break-word; /* 长单词断行 */
  font-family: monospace; /* 保持预格式化文本的等宽字体 */
  width: 100%;
  height: auto;
  //@include background_color($light_background_color);
  background-color: #fff;
}

.detail_content-style{
  position: absolute; /* 添加绝对定位 */
  top: 5%; /* 从父元素的底部开始 */
  margin-left: 5%;
  margin-right: 5%;
}

.container {
  margin: 0 auto;
  padding: 20px 0;
}
.logo {
  max-width: 200px;
}

.box {
  min-height: 100vh;
  width: 1200px;
  overflow: hidden;
  margin: 0 auto;
  padding: 32px;
}

.wrapper {
  width: 1200px;
  min-height: 600px;
  padding: 32px;
  background: #fff;
}

.nav {
  text-align: center;
  font-size: 21px;
  font-weight: bold;
}

.title {
  text-align: center;

  font-size: 21px;
  margin: 20px 0;
}

// iphone
@media screen and (max-width: 767px) {
  .box {
    min-height: 100vh;
    width: 100%;
    padding: 0;
    margin: 0 auto;
  }
  .wrapper {
    width: 100%;
    min-height: 600px;
    padding: 0 16px;
    background: #fff;
  }
}
</style>
